<template>
  <div class="container">
    <p class="h1">深圳大学城学生公寓住宿协议</p>
    <p class="number">编号：DXC-GY-2021-0000001</p>
    <div class="headBox">
      <p class="text">甲方： 深圳大学城管理服务中心校园服务部</p>
      <p class="text">乙方：<b> 张三 </b>，入住 <b>荷园</b></p>
      <p class="text_word">清华大学深圳国际研究生院20级硕、博研究生</p>
    </div>
    <div class="contentBox">
      <textPart></textPart>
    </div>

    <div class="endBox">
      <p class="text_word tip">甲方：深圳大学城管理服务中心校园服务部</p>
      <div class="text_word esighName">
        乙方：
        <div class="esigh_result">
          <img v-if="resultImg" :src="resultImg" alt="" />
        </div>
      </div>
      <p class="text_word">身份证号：88888888811115</p>
      <p class="text_word">协议号（即校园卡号）：S000001</p>
      <p class="text_word">协议签订时间：2021-12-15</p>

      <div class="confirmButton">
        <div class="esignBox" v-if="isShowEign">
          <vue-esign
            style="border: 1px solid #ddd"
            ref="esign"
            :width="1000"
            :height="320"
            :isCrop="isCrop"
            :lineWidth="lineWidth"
            :lineColor="lineColor"
            :bgColor.sync="bgColor"
          />
          <x-button
            class="button"
            @click.native="handleReset"
            :gradients="['#FF5E3A', '#FF9500']"
            mini
            >重新签名</x-button
          >
          <x-button
            class="button"
            @click.native="handleGenerate"
            type="primary"
            :gradients="['#6F1BFE', '#9479DF']"
            mini
            >确认</x-button
          >
        </div>
        <x-button
          v-if="!resultImg"
          @click.native="showEsign"
          :gradients="['#1D62F0', '#19D5FD']"
          type="primary"
          >确认签字</x-button
        >
        <x-button
          v-if="resultImg"
          @click.native="showEsign"
          type="primary"
          :gradients="['#1D62F0', '#19D5FD']"
          >提交</x-button
        >
      </div>
    </div>
  </div>
</template>
<script>
import { getUserInfo } from "@/api/api";
import {
  Group,
  Popup,
  Panel,
  AlertModule,
  Alert,
  XDialog,
  XButton,
  TransferDomDirective as TransferDom,
} from "vux";
import textPart from "../common/textpart.vue";
export default {
  directives: {
    TransferDom,
  },
  components: {
    Group,
    Popup,
    Panel,
    AlertModule,
    Alert,
    XDialog,
    XButton,
    textPart,
  },
  data() {
    return {
      fileList: [],
      resultImg: "", //生成图片
      lineWidth: 6, //画笔粗细
      lineColor: "#000000", //画笔颜色
      bgColor: "", // 背景颜色
      isCrop: false, //是否裁剪
      isShowEign: false,
    };
  },

  created() {
    // this.getFileList();
  },
  mounted() {
    this.$nextTick(() => {});
  },
  methods: {
    showEsign() {
      // this.isShowEign = true;
      let _this = this;
      AlertModule.show({
        // title: "提示",
        content: "您已经阅读并已悉知所有内容条款？",
        onShow() {},
        onHide() {
          _this.isShowEign = true;
        },
      });
    },
    handleReset() {
      this.$refs.esign.reset();
    },
    handleGenerate() {
      this.$refs.esign
        .generate()
        .then((res) => {
          this.resultImg = res;
          console.log(res);
          this.isShowEign = false;
        })
        .catch((err) => {
          this.$vux.toast.show({
            text: "您还没有签名",
            type: "cancel",
          }); // 画布没有签字时会执行这里 'Not Signned'
        });
    },
    /**列表 */
    getUserInfo() {
      getUserInfo().then((res) => {
        if (res.data.code != 0) {
          AlertModule.show({
            // title: "提示",
            content: res.data.msg,
            onShow() {
              setTimeout(() => {
                AlertModule.hide();
              }, 3000);
            },
            onHide() {},
          });
        } else {
          // console.log(res.data.data);
          let bus_data = res.data.data;
          this.busLinesList = bus_data;
          this.lineDetails = bus_data[0];
          const FirstStopMessage = this.lineDetails.listStops[0];
          // console.log("g", FirstStopMessage);
          this.stopName = FirstStopMessage.stopName;
          // this.getBusGPSPosition(this.lineDetails.busSelfId);
        }
      });
    },
  },
  computed: {},
};
</script>

<style scoped lang="scss">
.container {
  padding: 0.1rem 0.12rem;
  padding-top: 0.26rem;
  .headBox {
    margin-top: 0.3rem;
  }
  .contentBox {
    margin-top: 0.1rem;
  }
  .endBox {
    margin-bottom: 0.6rem;
    .confirmButton {
      position: relative;
      margin-top: 0.34rem;
      margin-bottom: 0.15rem;
      .esignBox {
        position: absolute;
        top: -0.4rem;
        z-index: 2;
        background-color: #fff;
        padding-bottom: 0.4rem;
        .button {
          // border: 0.01rem solid #ccc;
          // border-radius: 0.02rem;
          // padding: 0.04rem 0.1rem;
          // float: left;
          // text-align: center;
          // width: 0.5rem;
          margin-top: 0.08rem;
          margin-right: 0.2rem;
          // background-color: #4d9de7;
          // color: #fff;
        }
      }
    }
    .esighName {
      height: 0.32rem;
      display: flex;
      align-items: center;
      .esigh_result {
        width: 1rem;
        height: 0.32rem;
        img {
          width: 100%;
          // height: 100%;
          margin-left: -0.22rem;
        }
      }
    }
  }
}
</style>
